<template>
  <div class="app">
    <table class="content">
      <tr>
        <th class="pinyin">{{ p1 }}</th>
        <th class="pinyin">{{ p2 }}</th>
        <th class="pinyin">{{ p3 }}</th>
        <th class="pinyin">{{ p4 }}</th>
        <th class="pinyin">{{ p5 }}</th>
        <th class="pinyin">—</th>
        <th class="pinyin">{{ p6 }}</th>
        <th class="pinyin">{{ p7 }}</th>
      </tr>
    </table>
    <button @click="randomTxt">
      <p>开奖</p>
    </button>
  </div>
</template>

<script setup nmae="Fish1">
import { ref, onMounted } from 'vue';

let list35 = ref([]);
let list12 = ref([]);
let p1 = ref('00');
let p2 = ref('00');
let p3 = ref('00');
let p4 = ref('00');
let p5 = ref('00');
let p6 = ref('00');
let p7 = ref('00');

const init = () => {
  for (let index = 1; index < 36; index++) {
    let num;
    if (index < 10) {
      num = '0' + index;
    } else {
      num = '' + index;
    }
    list35.value.push(num);
  }
  for (let index = 1; index < 13; index++) {
    let num;
    if (index < 10) {
      num = '0' + index;
    } else {
      num = '' + index;
    }
    list12.value.push(num);
  }
};
const randomTxt = () => {
  detDuplicate();
  let p1Time = setInterval(() => {
    p1.value = random(1, 35);
  }, 50);
  let p2Time = setInterval(() => {
    p2.value = random(1, 35);
  }, 50);
  let p3Time = setInterval(() => {
    p3.value = random(1, 35);
  }, 50);
  let p4Time = setInterval(() => {
    p4.value = random(1, 35);
  }, 50);
  let p5Time = setInterval(() => {
    p5.value = random(1, 35);
  }, 50);
  let p6Time = setInterval(() => {
    p6.value = random(1, 35);
  }, 50);
  let p7Time = setInterval(() => {
    p7.value = random(1, 35);
  }, 50);
  setTimeout(() => {
    clearTimeout(p1Time);
    p1.value = list35.value[0];
  }, 500);
  setTimeout(() => {
    clearTimeout(p2Time);
    p2.value = list35.value[1];
  }, 600);
  setTimeout(() => {
    clearTimeout(p3Time);
    p3.value = list35.value[2];
  }, 700);
  setTimeout(() => {
    clearTimeout(p4Time);
    p4.value = list35.value[3];
  }, 800);
  setTimeout(() => {
    clearTimeout(p5Time);
    p5.value = list35.value[4];
  }, 900);
  setTimeout(() => {
    clearTimeout(p6Time);
    p6.value = list12.value[0];
  }, 1000);
  setTimeout(() => {
    clearTimeout(p7Time);
    p7.value = list12.value[1];
  }, 1100);
};
const random = (maxNum, minNum) => {
  let value = Math.floor(Math.random() * (maxNum - minNum + 1) + minNum);
  return value < 10 ? '0' + value : value + '';
};
const upsetArr = (arr) => {
  var l = arr.length;
  var index, temp;
  while (l > 0) {
    index = Math.floor(Math.random() * l);
    temp = arr[l - 1];
    arr[l - 1] = arr[index];
    arr[index] = temp;
    l--;
  }
  return arr;
};
const detDuplicate = () => {
  list35.value = upsetArr(list35.value);
  list12.value = upsetArr(list12.value);
};

onMounted(() => {
  init();
})
</script>

<style scoped>
.app {
  color: #ffe392;
  text-align: center;
}
table {
  padding-top: 250px;
  margin: auto;
  width: 90%;
}

.pinyin {
  height: 20px;
  font-size: 8em;
  font-family: "electronicFont";
  letter-spacing: 3px;
  font-weight: 700;
  text-align: center;
}

p {
  font-weight: 700;
  letter-spacing: 1px;
  word-spacing: 2px;
}

button {
  background-color: #ef941a;
  color: #fffbe2;
  width: 200px;
  height: 45px;
  position: relative;
  border-radius: 5px;
  margin: 50px;
  padding: 0;
  line-height: 0.5;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 1.5em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

button:hover,
button:focus {
  background-color: #efa134;
}

button:active {
  transform: translate(0px, 2px);
  -webkit-transform: translate(0px, 2px);
}
</style>
